<template>
  <div id="app">
    <!--    顶部模糊查询-->
    <div v-if="topInputShow">
      <el-form :inline="true" class="query">
        <el-form-item label="访问姓名">
          <el-input v-model="visitorName" style="width: 200px;height: 32px"></el-input>
        </el-form-item>
        <el-form-item label="访客手机号">
          <el-input v-model="visitorPhoneNumber" style="width: 200px;height: 32px"></el-input>
        </el-form-item>
        <el-form-item label="到访时间">
          <el-input v-model="visitorDate" style="width: 200px;height: 32px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="localVisitor(1)" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" style="width: 93px;height: 35px;line-height: 10px" @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <!--  按钮行-->
    </div>
    <el-row class="but">
      <el-button type="info" @click="outExe" style="width: 93px;height: 35px;line-height: 10px;" icon="el-icon-download">导出</el-button>
      <el-tooltip content="隐藏搜索" placement="top" style="margin-left: 1320px">
        <el-button icon="el-icon-search" size="mini" circle @click="topInputShows"></el-button>
      </el-tooltip>
      <el-tooltip content="刷新" placement="top" >
        <el-button icon="el-icon-refresh" size="mini" circle @click="refresh"></el-button>
      </el-tooltip>
    </el-row>

    <el-table
        class="tab"
        :data="visitors"
        id="exportVisitor"
        style="width: 100%"
        @selection-change="selectChange">
      <el-table-column
          width="50"
          type="selection">
      </el-table-column>
      <el-table-column
          label="序号"
          width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.visitorId }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="访客姓名"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.visitorName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="手机号码"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.visitorPhoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="小区名称"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyCommunity.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="到访时间"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.visitorDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="备注"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <label>--</label>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="localVisitor"
          :current-page="current"
          :page-sizes="[size]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


  </div>

</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  name: "VisitorView",
  data(){
    return {
      topInputShow:true,
      visitors:null,
      current:1,
      size:5,
      visitorName:"",
      visitorPhoneNumber:"",
      visitorDate:"",
      pages:0,
      total:0,
      ids:"",
      visitor:{
        visitorId:0,
        communityId:"",
        visitorName:"",
        visitorPhoneNumber:"",
        visitorDate:"",
        createTime:"",
        remark:""
      }
    }
  },
  methods:{
    localVisitor(current){
      this.current = current;
      this.axios.get("visitor-page?current="+this.current+"&size="+this.size+"&visitorName="+this.visitorName+"&visitorPhoneNumber="+this.visitorPhoneNumber+"&visitorDate="+this.visitorDate)
          .then(result =>{
            this.visitors = result.data.data.records;
            this.pages = result.data.data.pages;
            this.total = result.data.data.total;
          })
    },
    reset(){
      this.visitorName = ""
      this.visitorPhoneNumber=""
      this.visitorDate=""
      this.$router.go(0)
    },
    handleSizeChange(size) {
    },
    selectChange(selection){
      this.ids = selection.map(item => item.visitorId)
    },
    outExe(){
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {});
    },
    //隐藏模糊查询
    topInputShows(){
      this.topInputShow = !this.topInputShow;
    },
    refresh(){
      this.$router.go(0);
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = { raw: true };
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#exportVisitor").removeChild(fix),xlsxParam);
        document.querySelector("#exportVisitor").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#exportVisitor"),xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
  mounted(){
    this.localVisitor(1);
  }
}
</script>

<style scoped>
.but{
  position: relative;
}
.query{
  position: relative;
  margin-left: -400px;

}
.tab{
  position: relative;
}
.page{
  position: relative;
  margin-left: 1000px;
}
</style>